<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>闪光图片</title>
<style rel="stylesheet">
* {
    margin: 0;
    padding: 0;
}

#marquee {
    color: red;
    display: block;
    width: 96%;
    height: 30px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

#marquee_text {
    position: absolute;
    top: 0;
    left: 100%;
    line-height: 30px;
    display: block;
    word-break: keep-all;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
</head>
<body>
    <div id="marquee">
        <div id="marquee_text">
            <span class="text">1滚动跑马灯~  </span>
            <span class="text">2滚动跑马灯~  </span>
            <span class="text">3滚动跑马灯~  </span>
            <span class="text">4滚动跑马灯~  </span>
        </div>
    </div>
</body>
<script type="text/javascript">
    marquee("marquee", "marquee_text");

    /**
     * 跑马灯实现
     * @param container 跑马灯容器
     * @param content 内部滚动内容
     */
    function marquee(container, content) {
        var containerEle = document.getElementById(container);
        var contentEle = document.getElementById(content);
        var scrollWidth = containerEle.offsetWidth;
        var textWidth = contentEle.offsetWidth;
        var currentScrollWidth = scrollWidth;

        function changeLeft() {
            currentScrollWidth--;
            if (currentScrollWidth < -textWidth) {
                currentScrollWidth = scrollWidth;
            }
            contentEle.style.left = currentScrollWidth + "px";
            // 重绘之前更新下一帧动画
            window.requestAnimationFrame(changeLeft);
        }

        // 执行动画
        window.requestAnimationFrame(changeLeft);
    }
</script>
</html> 
